<template>
<div>
    <el-form :inline="true" :model="formInline" class="form-inline" style="float:right;padding-right:30px">
        <el-form-item>
            <el-input v-model="input" placeholder="请输入搜索内容"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="loadData()">查询</el-button>
        </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="tableData" height="800px" border style="width: 100%">
        <el-table-column type="index" width="50">
        </el-table-column>
        <el-table-column prop="ip" label="IP" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址" width="180">
        </el-table-column>
        <el-table-column prop="company" label="运营商">
            <template slot-scope="scope">
                <el-tag type="success">{{scope.row.company}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="counts" label="访问次数">
        </el-table-column>
    </el-table>
    <el-pagination :page-size="pagesize" @current-change="pageChange" @next-click="pageChange" @prev-click="pageChange" prev-text="上一页" next-text="下一页" :background="true" background layout="prev, pager, next" :total="count">
    </el-pagination>
</div>
</template>

<script>
export default {
    data() {
        return {
            formInline: {
                user: '',
                region: ''
            },
            input: '',
            pagesize: 12,
            loading: true,
            current: 1,
            count: 0,
            tableData: []
        }
    },
    methods: {
        loadData() {
            this.axios.get("/api/data/", {
                params: {
                    current: this.current,
                    key: this.input
                }
            }).then(res => {
                this.count = res.data.data.count;
                this.tableData = res.data.data.records;
                this.loading = false;
            })
        },
        pageChange(page) {
            this.current = page;
            this.loadData();
        }
    },
    created() {
        this.loadData()
    }
}
</script>

<style scoped>
</style>
